{% load static %}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
      table {
        border-collapse: collapse; /* 合并边框 */

        width: 100%; /* 表格宽度设置为100% */
      }

      th,
      td {
        border: 1px solid black; /* 单元格边框 */

        padding: 8px; /* 单元格内边距，增加格子间的距离 */

        text-align: left; /* 文本左对齐 */
      }

      th {
        background-color: #f2f2f2; /* 标题行背景色 */
      }
    </style>
    <title>work</title>
  </head>

  <body>
    <!-- 导航 -->
    <header>
      <div class="logo">work</div>
      <nav>
        <a href="#home">首页</a>
        <a href="#about-us">关于我们</a>
      </nav>
    </header>
    <div>body</div>
    <table>
      <thead>
        <tr>
          <th>检验单号</th>
          <th>检验日期</th>
          <th>存货编码</th>
          <th>存货名称</th>
          <th>规格型号</th>
          <th>品牌</th>
          <th>供应商编码</th>
          <th>供应商名称</th>
          <th>批号</th>
          <th>生产日期</th>
          <th>合格数量</th>
          <th>不良数量</th>
        </tr>
      </thead>
      <tbody>
        {% for data in datas %}
        <tr>
          <td>{{data.检验单号}}</td>
          <td>{{data.检验日期}}</td>
          <td>{{data.存货编码}}</td>
          <td>{{data.存货名称}}</td>
          <td>{{data.规格型号}}</td>
          <td>{{data.品牌}}</td>
          <td>{{data.供应商编码}}</td>
          <td>{{data.供应商名称}}</td>
          <td>{{data.批号}}</td>
          <td>{{data.生产日期}}</td>
          <td>{{data.合格数量}}</td>
          <td>{{data.不良数量}}</td>
        </tr>
        {% endfor %}
      </tbody>
    </table>

    <!-- 尾部 -->
    <footer>
      <div>footer</div>
    </footer>

  </body>
</html>
